﻿@charset "utf-8";
/* CSS Document 不建议用*，本项目属于个人练手*/
*{margin:0; padding:0;}
.clear:after{content:"";display:block;clear:both;}
body{
	background-image:url(../images/shan.jpg); background-size:100% 100%;
	background-attachment:fixed;
	height: auto;
	}
a{color:#CCC;}
/*去掉下划线*/
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
}
a:active {
 text-decoration: none;
}
/**/
#top{background:#3f51b5; width:100%; line-height: 50px; text-align:center; font-size: 2rem; height:50px; margin:auto; position:fixed; top:0px; color: #fff; border: 1px solid #3f51b5; z-index:999;}

.main{width:900px; height:600px; margin: 0 auto;}

/*直播系统以及截图功能*/
.box{margin-top:60px; width:900px; height:650px;  background-image:url(../images/LOGO_BLACK.jpg); background-size:cover; border-radius:10px 10px 10px 10px; float:left;}
.box .box-top{line-height:80px; font-size:15px; font-family:"微软雅黑"; font-weight:300; background:#cc00cc; color:#6600ff;   border-radius:10px 10px 0px 0px;}
.box .box-top .box-title{margin-left: 23%; font-size:3rem; font-family: "华文行楷"; font-weight: 900px; color: #000000; text-shadow:5px 5px 5px #808080;}
.box .bo{border:none; outline:none; background:#ff3300; width:168px; height:52px; border-radius:0px 10px 10px 0px; cursor:pointer; font-size: 24px;}
.box .bo:hover{background:#cc6600; color:#99ff00;}
.box .bot{border:none; outline:none; background:#ff33ff; width:150px; height:45px; padding:0px 15px; font-size:24px; border-radius:5px 5px 5px 5px;  margin-left:12px; color:#000000; font-weight: 500;}
.box .bot:hover{background:#cc3300; color:#ffffff; 
       transition:all 2s;
	   -moz-transform:rotate(360deg);
	   transform:rotate(360deg);
       border-radius:5px;
	   box-shadow:5px 5px 5px #000033;
	   cursor:pointer;
	   }
.box .gamre{ width:900px; height:568px;}
.box .foot,.CatImgTitle{line-height:53px; height:47px; width:900px; background:#cc66ff; color:#000000; font-size:28px; font-family:"华文行楷"; line-height:50px;    border-radius:10px; float:left;}
.box .foot #get-flower{color: red; margin-left: 10px;}

/*发言按钮*/
.chat-content{width:520px; height:200px; margin-top:20px; background:#FFF;}
.chat{
	width: 560px;
    height: 40px;
    background:#633;
    position: fixed;
    left: 30%;
    bottom: 100px;
	border-radius:10px;
	}
.getFlower{
    padding-left: 60px;
}
/*送鲜花的对象Style*/
#giveFlower{
	display: block;
	width: 450px;
	line-height: 30px;
	text-align: center;
    height: 30px;
    bottom: 100px;
    position: fixed;
    bottom: 300px;
    left: 37%;
    color: #ff2626;
    font-size: 28px;
    text-shadow:2px 2px 2px #ffff80;
}
/**/
.chat .chat-txt{width:310px; height:38px; outline:none; border:1px solid #636; border-radius:10px 0px 0px 10px; padding-left:10px;}
.chat #flower{width:40px; height:40px; outline:none; border:none; background-image: url(../images/find.xianhua.png); background-size: 100% 100%; border-radius:50%; margin-left:-5px; cursor:pointer;}
.chat #flower:hover{transition:all 2s; -moz-transition:all 2s; transform:rotate(360deg); -moz-transform:rotate(360deg); border:1px solid #2626ff; }
.chat .chat-btn,.index-btn{width:80px; height:40px; outline:none; border:1px solid #636; background:#669;  border-radius:10px 10px 10px 10px; margin-left:-3px; cursor:pointer;}
.chat .index-btn{width:100px; padding: 0 6px;}
.chat .chat-btn:hover,.chat .index-btn:hover{background: #4f4f77; color: #fff;}


/*截图功能*/
.CatImgTitle{text-align: center; margin-top: 50px; background: rgba(255,255,255,0.7);}
#canvas{border:1px solid #cc3300; border-radius:10px; margin:auto; width:900px; height:580px; margin-top:10px; background:url(../images/zhenLogo.png) no-repeat center;}

/*视频弹幕*/
        /*.flex-column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;, align-items: center;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }*/
        .gamre{
        	overflow: hidden;
        }
        .box  .gamre{
            position: relative;
        }
        .box  .gamre span {
            position: absolute;
            top: 10px;
            left: 20px;
            display: block;
            padding: 10px;
            color: #336688
        }
